import React, { Component } from "react";
import Header from "../../components/Header/Header";
import { $pre } from "../../http/http";
import { Button, Toast } from "antd-mobile";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
// import { reqgetgoods ,reqgetcate} from "../../http/api";
import { actions, getCates, getN, getGoods } from "../../store/modules/cate";
import "./cate.less";

class Cate extends Component {
  componentDidMount() {
    let {
      Catess: { reqCate, reqGoods },
      n
    } = this.props;
    reqCate();
   
    reqGoods(1);
  }
  // constructor() {
  //   super();
  //   this.state = {
  //     cate: [],
  //     n: 0,
  //     godds: [],
  //     id:null
  //   };
  // }
  // async componentDidMount() {
  //   reqgetcate().then((res) => {
  //     this.setState({
  //       cate: res.data.list,
  //     });
  //   });

  //   this.handleClick(0,1)
  // }
  // async handleClick(index, id) {
  //   this.setState({
  //     n: index,
  //   })
  //   let res = await reqgetgoods({ fid: id});
  //   if (res.data.code == 200) {
  //     this.setState({
  //       godds: res.data.list,

  //     });
  //   }
  // }
  render() {
    let {
      cate,
      n,
      Catess: { changeN,reqGoods },
      goods,
    } = this.props;
    return (
      <div>
        <Header title="分类"></Header>
        <div id="header">
          {/* <div>cates:{cate}</div> */}
          <div className="left">
            <ul>
              <li>本周特惠</li>
              {cate.map((item, index) => {
                return (
                  <li
                    key={item.id}
                    onClick={() => {
                      changeN(index, item.id)
                      reqGoods(item.id)
                    }
                  
                    }
                 
                    className={n == index ? "active" : null}
                    
                  >
                    {" "}
                    {item.catename}
                    
                  </li>
                   
                );
              })}
            </ul>
          </div>
          <div className="right">
            {goods.map((item) => {
              return (
                <div
                  className="flse"
                  key={item.id}
                  onClick={() => {
                    this.props.history.push("/detail/" + item.id);
                  }}
                >
                  {" "}
                  <div className="navbanner">
                    <img src={$pre + item.img} alt={item.goodsname} />
                  </div>
                  <div className="navright">
                    <p>{item.goodsname}</p>
                    <p>{item.price}</p>
                    <p>{item.market_price}</p>
                    <p>{item.id}人已付款</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
const mapStateToprops = (state) => {
  return {
    cate: getCates(state),
    n: getN(state),
    goods: getGoods(state),
  };
};
const mapDispatchToprops = (dispatch) => {
  return {
    Catess: bindActionCreators(actions, dispatch),
  };
};
export default connect(mapStateToprops, mapDispatchToprops)(Cate);
